<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="110px">
      <el-form-item label="波次号/容器号" required >
        <el-input :disabled='state.isDisabled' v-model="form.wavePickingCode" id='inputId'
        @keydown.enter.native="waveNumberEnterDown()"
        @keyup.enter.native="waveNumberEnterUp()"
        ></el-input>
      </el-form-item>
      <el-form-item label="波次号">
        <span>{{state.form.wavePickingCode||''}}</span>
      </el-form-item>
      <el-form-item label="类型" >
        <span>{{state.form.orderTag||''}}</span>
      </el-form-item>
      <el-form-item label="入驻商" >
        <span>{{state.form.shipmentName||''}}</span>
      </el-form-item>
      <el-form-item label="承运商">
        <span>{{state.form.carrierName||''}}</span>
      </el-form-item>
      <el-form-item label="商品条码" required>
        <el-input
          id="goodsNobp"
          v-model="form.no"
          @keydown.enter.native="courierNumberEnterDown()"
          @keyup.enter.native="courierNumberEnterUp()"></el-input>
      </el-form-item>
      <el-form-item label="商品名称">
        <span>{{state.goodsName||''}}</span>
      </el-form-item>
      <el-form-item label="商品数量">
        <span>{{state.planQuantity||''}}</span>
      </el-form-item>
      <el-form-item label="复核数量">
         <el-input v-model="state.num" controls-position="right" id='refReunite' @keyup.enter.native='reunite'/>
      </el-form-item>
    </el-form>
    <el-table
      :align="allAlign"
      border
      :data="state.leftData">
      <el-table-column  label="商品种数" align='center'>
        <template v-slot="{ row }">
           <span style="color:red;font-weight:700;font-size:18px">{{row.goodsSortQuantity}}</span>
        </template>
      </el-table-column>
      <el-table-column label="已复核" align='center'>
        <template v-slot="{ row }">
           <span style="color:green;font-weight:700;font-size:18px">{{row.recheckDeliveryCount}}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品总数" align='center'>
        <template v-slot="{ row }">
           <span style="color:red;font-weight:700;font-size:18px">{{row.planQuantity}}</span>
        </template>
      </el-table-column>
      <el-table-column  label="已复核" align='center'>
        <template v-slot="{ row }">
           <span style="color:green;font-weight:700;font-size:18px">{{row.recheckQuantity}}</span>
        </template>
      </el-table-column>
      <el-table-column  label="包裹数" align='center'>
        <template v-slot="{ row }">
           <span style="color:blue;font-weight:700;font-size:18px">{{row.deliveryCount}}</span>
        </template>
      </el-table-column>
    </el-table>
        <div class="text green" v-if="state.complete">
        {{form.wavePickingCode||''}}复核出库完成
    </div>
    <div class="text item" v-if="state.greater">
        {{state.numMsg}}
    </div>
    <div class="text item" v-if="state.none">
        当前订单无此商品
    </div>
    <p> {{ state.cancelOrderPrompt }} </p>
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose">
      <div  class="body">
        {{state.msg}}
      </div>
    </el-dialog>
  </div>
</template>
<script>
import soonPrint from '@/components/Printing/printBefore.js'
export default {
  name:'left',
  data(){
    return{
      dialogVisible:false,
      rules:{},
      allAlign:'center',
      state:this.$store.state.products,
      dispatch:this.$store.dispatch,
      commit:this.$store,
      form:{
        no:'',
        wavePickingCode:'',
      },
      len:0,
      noNum:1,
      waveNumberEnterDown(e){
        this.keyDownTimeWave = new Date().getTime();
      },
      waveNumberEnterUp(e){
        this.keyUpTimeWave = new Date().getTime();
        if(this.keyUpTimeWave - this.keyDownTimeWave < 30){
          console.log('扫码')
          if(this.len === 0){
            this.waveNumber()
            this.len = this.form.wavePickingCode.length
          }else{
            let lengths = this.form.wavePickingCode.length
            this.form.wavePickingCode = this.form.wavePickingCode.substring(this.len,lengths)
            this.waveNumber()
          }
        }else{
          this.waveNumber()
        }
      },
      courierNumberEnterDown(e){
        this.keyDownTime = new Date().getTime();
      },
      courierNumberEnterUp(e){
        this.keyUpTime = new Date().getTime();
        if (this.keyUpTime - this.keyDownTime < 30) {
          // this.$store.commit('products/SET_NUM', '1')
          this.$store.commit('products/SET_SN', 0)
          if(!this.state.barCode){
            this.$store.commit('products/SET_BARCODE',this.form.no )
            this.$store.dispatch("products/query",{wavePickingCode:this.form.wavePickingCode,goodsBarCode:this.form.no}).then((res)=>{
              if ([400, 500].includes(res.status)) {
                this.$message.error(res.msg)
                return false
              }
              if(res === 3)return
              this.funForm()
              // 去掉 商品条码 回车后不复核
              // const rLoading = this.openLoading('复核中...')
              // this.$store.dispatch('products/updateHotReviewFun',{val:1,noNum:this.noNum}).then(res=>{
              //   rLoading.close()
              //   if(res === 9) return this.dialogVisible = true
              //   if(!res){
              //     // this.$store.commit('products/SET_NUM', '')
              //     this.dialogVisible = false
              //   }else if(res === 1){
              //     this.noNum = 1
              //     localStorage.setItem('printData', JSON.stringify(this.$store.state.products.printData))
              //     const routeUrl = this.$router.resolve({ path: '/printResult' })
              //     // window.open(routeUrl.href, '_blank')
              //     soonPrint(routeUrl.href)
              //     // new PrintWaybill({ printData: this.$store.state.products.printData }).initSocket()
              //   }else if(res){
              //     this.noNum = ++this.noNum
              //   }else if(res === 7)return this.$message.error('缺少快递信息')
              // })
            })
          }else{
            let len = this.state.barCode.length
            let noLen = this.form.no.length
            this.form.no = this.form.no.substring(len,noLen)
            this.$store.commit('products/SET_BARCODE',this.form.no )
            this.$store.dispatch("products/query",{wavePickingCode:this.form.wavePickingCode,goodsBarCode:this.form.no}).then((res)=>{
              if(res === 3)return
              this.funForm()
              const rLoading = this.openLoading('复核中...')
              this.$store.dispatch('products/updateHotReviewFun',{val:1,noNum:this.noNum}).then(res=>{
                rLoading.close()
                if ([400, 500].includes(res.status)) {
                  this.$message.error(res.msg)
                  return false
                }
                if(res === 9) return this.dialogVisible = true
                if(!res){
                  // this.$store.commit('products/SET_NUM', '')
                  this.dialogVisible = false
                }else if(res === 1){
                  this.noNum = 1
                  localStorage.setItem('printData', JSON.stringify(this.$store.state.products.printData))
                  const routeUrl = this.$router.resolve({ path: '/printResult' })
                  // window.open(routeUrl.href, '_blank')
                  soonPrint(routeUrl.href)
                  // new PrintWaybill({ printData: this.$store.state.products.printData }).initSocket()
                }else if(res){
                  this.noNum = ++this.noNum
                }else if(res === 7)return this.$message.error('缺少快递信息')
              })
            })
          }
        }else{
          this.$store.commit('products/SET_BARCODE',this.form.no)
          this.$store.commit('products/SET_SN',1)
          this.$store.dispatch("products/query",{wavePickingCode:this.form.wavePickingCode,goodsBarCode:this.form.no}).then(res=>{
            // state.goodsName
            console.log('res,', res, this.state.goodsName);
            setTimeout(() => {
              if (!this.state.goodsName) {
                this.$message.error('波次单不存在!')
              } else {
                document.getElementById('refReunite').focus()
                this.funForm()
              }
            }, 400);
          })
        }
      },
    }

  },
  mounted () {
    //进入获取焦点
    document.getElementById('inputId').focus()

    this.$eventBus.$on('refreshCurrentPage', () => {
      this.state.complete && this.refreshCurrentPage()
    })
  },
  methods:{
    // 复核完成 && 打印完成 后刷新当前页
    refreshCurrentPage() {
      this.$store.dispatch('tagsView/delCachedView', this.$route).then(() => {
        const { fullPath } = this.$route
        this.$nextTick(() => {
          this.$router.replace({
            path: '/redirect' + fullPath
          })
        })
      })
    },
    handleClose(){
      this.dialogVisible = false
    },
    //波次号
    waveNumber(){
      this.dispatch('products/query',{wavePickingCode:this.form.wavePickingCode,goodsBarCode:''}).finally(()=>{
        setTimeout(() => {
          if (!this.state.form.wavePickingCode) {
            this.$message.error('波次单不存在!')
          } else {
            document.getElementById('goodsNobp').focus()
          }
        }, 400);
      })
    },
    funForm(){
      this.$store.dispatch("products/barCode",this.form.no).then(res=>{
        if(!res){
          this.$message.error('请输入或扫描正确商品条码')
        }
      })
    },
    //复核数量回车
    reunite(){
      this.$store.commit('products/SET_SN', 1)
      if(!this.state.num)return this.$message.error('请输入复核数量')
      if(!Number(this.state.num)|| Number(this.state.num)<=0) return this.$message.error('请输入大于0的数字')
      const rLoading = this.openLoading('复核中...')
      this.dispatch('products/updateHotReviewFun',{val:Number(this.state.num),noNum:this.noNum}).then(res=>{
        rLoading.close()
        if ([400, 500].includes(res.status)) {
          this.$message.error(res.msg)
          return false
        }
        if(res===9) return this.dialogVisible = true
        document.getElementById('goodsNobp').focus()
        if(!res){
          // this.$store.commit('products/SET_NUM', '')
          this.dialogVisible = false
        }else if(res === 1){
          this.noNum = 1
          localStorage.setItem('printData', JSON.stringify(this.$store.state.products.printData))
          const routeUrl = this.$router.resolve({ path: '/printResult' })
          // window.open(routeUrl.href, '_blank')
          soonPrint(routeUrl.href)
          // new PrintWaybill({ printData: this.$store.state.products.printData }).initSocket()
        }else if(res){
          this.noNum = ++this.noNum
        }else if(res === 7)return this.$message.error('缺少快递信息')
      })
    },
  }
}
</script>
<style >
.body{
  text-align: left;
    width: 100%;
    word-wrap: break-word;
    color: red;
}
.green{
  background-color: rgb(99, 235, 99);
  height: 50px;
  line-height: 50px;
  color:white;
  text-align: center;
  margin-top: 5px;
  border-radius: 4px;
  font-size: 18px;
}
.item{
  background-color: red;
  height: 50px;
  color:white;
  line-height: 50px;
  text-align: center;
  margin-top: 5px;
  border-radius: 4px;
  font-size: 18px;
}
</style>
